<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        div{
            width: 60%;
            margin: 0 auto;
            text-align: center;
        }
        div button{
            margin-top: 100px;
        }
        h1{
            text-align: center;
            background-color: gainsboro;
        }
        table{
            width: 100%;
            border: #0b2e13 solid 1px;
        }
        td{
            width: 100px;
            text-align: center;
            border: #0b2e13 solid 1px;
        }
    </style>
</head>
<body>
<!--<ul>-->
<!--    <li>1</li>-->
<!--    <li id="second">2</li>-->
<!--    <li>3</li>-->
<!--    <li>4</li>-->
<!--    <li>5</li>-->
<!--</ul>-->
<!--<div>-->
<!--    <h1 id="title"></h1>-->
<!--    <p></p>-->
<!--    <h1></h1>-->
<!--    <p></p>-->
<!--</div>-->
<!--<button type="button" class="btn btn-outline-primary">Primary</button>-->
<!--<button type="button" class="btn btn-outline-secondary">Secondary</button>-->
<!--<button type="button" class="btn btn-outline-success">Success</button>-->
<!--<button type="button" class="btn btn-outline-danger">Danger</button>-->
<!--<button type="button" class="btn btn-outline-warning">Warning</button>-->
<!--<button type="button" class="btn btn-outline-info">Info</button>-->
<!--<button type="button" class="btn btn-outline-light">Light</button>-->
<!--<button type="button" class="btn btn-outline-dark">Dark</button>-->
<div>
    <h1>关键词信息列表</h1>
    <table class="table table-striped table-hover">
        <tr>
            <td>编号</td>
            <td>名字</td>
            <td>类型</td>
            <td>时间</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>1</td>
            <td>股票</td>
            <td>金融</td>
            <td>2020-02-20</td>
            <td>删除</td>
        </tr>
        <tr>
            <td>2</td>
            <td>股票</td>
            <td>金融</td>
            <td>2020-02-20</td>
            <td>删除</td>
        </tr>
        <tr>
            <td>3</td>
            <td>股票</td>
            <td>金融</td>
            <td>2020-02-20</td>
            <td>删除</td>
        </tr>
        <tr>
            <td>4</td>
            <td>电影票房</td>
            <td>娱乐</td>
            <td>2020-02-20</td>
            <td>删除</td>
        </tr>
    </table>
    <button type="button" class="btn btn-outline-dark">添加关键词</button>
</div>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        // $(function (){
        //    $("li").mouseover(function (){
        //        // $("li").css("background-color","");
        //        $(this).css("background-color","#333333").siblings().css("background-color","");
        //    });
        //    $("#second~li").css("color","red");//兄弟选择器
        //    $("#second+li").css("color","yellow");//相邻选择器
        // });
        $(function () {
            $("td").css("cursor","pointer");
            $("tr:gt(0):even").css("background","gray");
            $("tr:gt(0) td:last-child").css("text-decoration", "underline")
            $("tr:gt(0) td:last-child").click(function () {
                let result = confirm("确定要删除吗？");
                if (result){
                    $(this).parent().remove();
                }
            });
        })
    </script>
</body>
</html>